<template>
  <div style="display: flex; flex-wrap: wrap; gap: 20px;">
    <div class="cardWrap">
      <ProdBonus
        title="生产提成"
        :count="3"
        ref="prodBonus"
        :edit="isEdit"
        :rates="prodConfig.rates"
        :marks="['完成项目立项时设定的工期目标','完成项目立项时设定的质量目标','完成项目的其它要求根据《项目审查表》完成情况']" />
    </div>
    <div class="cardWrap">
      <ProdRates
        title="生产固定提成"
        ref="staticBonus"
        :rate="prodConfig.statusRates"
        :edit="isEdit" />
      <!-- <EnginerRates
        title="工程组提成比率"
        ref="enginerRates"
        :ext13="engineConfig.rates.ext13"
        :ext14="engineConfig.rates.ext14"
        :ext15="engineConfig.rates.ext15"
        :edit="isEdit"
      /> -->
    </div>
    <!-- <div class="cardWrap" v-if="demo" >
      <DemoCard title="模拟" />
    </div> -->
  </div>
</template>

<script>
import ProdBonus from './compontents/ProdBonus'
// import DemoCard from './compontents/DemoCard'
import ProdRates from './compontents/ProdRates'

export default {
  name: 'ProdCards',
  components: {
    ProdBonus,
    // DemoCard,
    ProdRates
  },
  props: {
    isEdit: {
      type: Boolean,
      default: () => false
    },
    prodConfig: {
      type: Object,
      default: () => {}
    },
    demo: {
      type: Boolean,
      default: () => true
    }
  },
  data () {
    return {
      // edit: false
    }
  },
  methods: {
    getConfig () {
      /**
       * prodBonus 生产提成
       */
      const prodBonus = this.$refs.prodBonus.getValue()
      const rate = this.$refs.staticBonus.getValue()
      return { rates: prodBonus.rates, statusRates: rate }
    }
  }
}
</script>
<style lang="less" scoped>
.cardWrap {
  width: calc(50% - 40px);
}
</style>
